<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view class="pure-stepper" :class="_classes" :style="_styles">
		<view
			class="pure-stepper__symbol"
			:hover-class="
				$attrs.hoverClass || $attrs['hover-class'] || 'pure-hover'
			"
			@tap="handleMinus"
			@longpress="handleLongMinus"
			@touchend="clearLongTapTimer"
			:class="{ 'pure-stepper__symbol--disabled': _isDisabledMinus }"
		>
			<view class="pure-stepper__symbol__icon">
				<pure-icon
					:name="minusIconName"
					:mode="$attrs.minusIconMode || $attrs['minus-icon-mode']"
				></pure-icon>
			</view>
		</view>
		<view class="pure-stepper__content">
			<input
				class="pure-stepper__input"
				type="number"
				:value="modelValue"
				:text-content-type="
					$attrs.textContentType || $attrs['text-content-type']
				"
				:placeholder="$attrs.placeholder"
				:placeholder-style="
					$attrs.placeholderStyle || $attrs['placeholder-style']
				"
				:placeholder-class="
					$attrs.placeholderClass || $attrs['placeholder-class']
				"
				:maxlength="-1"
				:cursor-spacing="
					$attrs.cursorSpacing || $attrs['cursor-spacing']
				"
				:focus="$attrs.focus"
				:confirm-type="$attrs.confirmType || $attrs['confirm-type']"
				:confirm-hold="$attrs.confirmHold || $attrs['confirm-hold']"
				:cursor="$attrs.cursor"
				:cursor-color="$attrs.cursorColor || $attrs['cursor-color']"
				:selection-start="
					$attrs.selectionStart || $attrs['selection-start']
				"
				:selection-end="$attrs.selectionEnd || $attrs['selection-end']"
				:adjust-position="
					$attrs.adjustPosition || $attrs['adjust-position']
				"
				:auto-blur="$attrs.autoBlur || $attrs['auto-blur']"
				:ignoreCompositionEvent="
					$attrs.ignoreCompositionEvent ||
					$attrs['ignore-composition-event']
				"
				:always-embed="$attrs.alwaysEmbed || $attrs['always-embed']"
				:hold-keyboard="$attrs.holdKeyboard || $attrs['hold-keyboard']"
				:safe-password-cert-path="
					$attrs.safePasswordCertPath ||
					$attrs['safe-password-cert-path']
				"
				:safe-password-length="
					$attrs.safePasswordLength || $attrs['safe-password-length']
				"
				:safe-password-time-stamp="
					$attrs.safePasswordTimeStamp ||
					$attrs['safe-password-time-stamp']
				"
				:safe-password-nonce="
					$attrs.safePasswordNonce || $attrs['safe-password-nonce']
				"
				:safe-password-salt="
					$attrs.safePasswordSalt || $attrs['safe-password-salt']
				"
				:safe-password-custom-hash="
					$attrs.safePasswordCustomHash ||
					$attrs['safe-password-custom-hash']
				"
				:random-number="$attrs.randomNumber || $attrs['random-number']"
				:controlled="$attrs.controlled"
				:always-system="$attrs.alwaysSystem || $attrs['always-system']"
				:inputmode="$attrs.inputmode || $attrs['inputmode']"
				@focus="onFocus"
				@input="onInput"
				@blur="onBlur"
				@confirm="onConfirm"
				@keyboardheightchange="onKeyboardheightchange"
			/>
		</view>
		<view
			class="pure-stepper__symbol"
			:hover-class="
				$attrs.hoverClass || $attrs['hover-class'] || 'pure-hover'
			"
			@tap="handlePlus"
			@longpress="handleLongPlus"
			@touchend="clearLongTapTimer"
			:class="{ 'pure-stepper__symbol--disabled': _isDisabledPlus }"
		>
			<view class="pure-stepper__symbol__icon">
				<pure-icon
					:name="plusIconName"
					:mode="$attrs.plusIconMode || $attrs['plus-icon-mode']"
				></pure-icon>
			</view>
		</view>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed, inject, watch, onUnmounted } from "vue";
import props from "./props";
import { delay } from "../../functions";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************
let longTapTimer = null;

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Injects
// **************************************************************************************************************
const PureFormItemOnBlur = inject("PureFormItemOnBlur", null);
const PureFormItemOnChange = inject("PureFormItemOnChange", null);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits([
	"input",
	"focus",
	"blur",
	"confirm",
	"keyboardheightchange",
	"update:modelValue",
	"update:modelValue",
	"outMin",
	"outMax",
]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];
	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];
	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************
// 是否禁用减号按钮
const _isDisabledMinus = computed(() => {
	return _props.modelValue <= _props.min;
});

// 是否禁用加号按钮
const _isDisabledPlus = computed(() => {
	return _props.modelValue >= _props.max;
});

// **************************************************************************************************************
// * Watch
// **************************************************************************************************************
// 监听值，变化后通知 form-item
watch(
	() => _props.modelValue,
	(newValue, oldValue) => {
		if (newValue !== oldValue) {
			PureFormItemOnChange?.();
		}
	}
);

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
// 减
function handleMinus() {
	const targetValue = _props.modelValue - _props.step;
	if (targetValue < _props.min) {
		_emits("outMin", targetValue);
		_emits("update:modelValue", _props.min);
		return;
	}
	_emits("update:modelValue", targetValue);
}

// 加
function handlePlus() {
	const targetValue = _props.modelValue + _props.step;
	if (targetValue > _props.max) {
		_emits("outMax", targetValue);
		_emits("update:modelValue", _props.max);
		return;
	}
	_emits("update:modelValue", targetValue);
}

// 长按减
function handleLongMinus() {
	longTapTimer = setInterval(() => {
		const targetValue = _props.modelValue - _props.step;
		if (targetValue < _props.min) {
			_emits("outMin", targetValue);
			_emits("update:modelValue", _props.min);
			clearLongTapTimer();
			return;
		}
		_emits("update:modelValue", targetValue);
	}, 200);
}

// 长按加
function handleLongPlus() {
	longTapTimer = setInterval(() => {
		const targetValue = _props.modelValue + _props.step;
		if (targetValue > _props.max) {
			_emits("outMax", targetValue);
			_emits("update:modelValue", _props.max);
			clearLongTapTimer();
			return;
		}
		_emits("update:modelValue", targetValue);
	}, 200);
}

// 清除长按定时器
function clearLongTapTimer() {
	clearTimeout(longTapTimer);
	longTapTimer = null;
}

// 输入事件
async function onInput(e) {
	const value = Number(e.detail.value);
	console.log("Input", value);

	// 在有效区间
	if (value >= _props.min && value <= _props.max) {
		_emits("update:modelValue", value);
		return;
	}

	// 不在有效区间，得先更新一下值
	_emits("update:modelValue", value);

	// 输入值无效
	if (isNaN(value)) {
		await delay(20);
		_emits("update:modelValue", _props.modelValue);
		return;
	}

	// 超出最大值
	if (value > _props.max) {
		_emits("outMax", value);
		await delay(20);
		_emits("update:modelValue", _props.max);
		return;
	}

	// 超出最小值
	if (value < _props.min) {
		console.log("超出最小值");
		_emits("outMin", value);
		await delay(20);
		_emits("update:modelValue", _props.min);
		return;
	}
}

// 获取焦点事件
function onFocus(e) {
	_emits("focus", e);
}

// 失去焦点事件
function onBlur(e) {
	_emits("blur", e);
	PureFormItemOnBlur?.();
}

// 确认事件
function onConfirm(e) {
	_emits("confirm", e);
}

// 键盘高度变化事件
function onKeyboardheightchange(e) {
	_emits("keyboardheightchange", e);
}

// **************************************************************************************************************
// * 生命周期
// **************************************************************************************************************
// 组件卸载时
onUnmounted(() => {
	// 清除长按定时器
	clearLongTapTimer();
});
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
